<template>
  <div>
    <el-main>
      <div class="s_flex s_justify_content">
        <div class="left_menus">
          <!-- :unique-opened="true" -->
          <el-menu
            default-active="8"
            class="el-menu-vertical-demo"
            @select="handselect"
          >
            <el-menu-item
              :class="checkType == item.id ? 'menu_active' : ''"
              v-for="(item, index) in menu"
              :index="item.path"
              :key="item.id"
            >
              <span slot="title">{{ item.menu }}</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="centet_chart">
          <component :is="currentView"></component>
        </div>
      </div>
    </el-main>
  </div>
</template>


<script>
import news from "./news.vue";
import assistance from "./assistance.vue";
import formtube from "./formtube.vue";
import engineering from "./engineering.vue";
import honor from "./honor.vue";
import dynamic from "./dynamic.vue";
// import protection from "./protection.vue";
import banner from "./banner.vue";
import bannerSmall from "./bannerSmall.vue";
import labels from "./labels.vue";
import financial from "./financial.vue";
// import policies from "./policies.vue";
// import association from "./association.vue";
// import analysis from "./analysis.vue";
// import warning from "./warning.vue";

export default {
  components: {
    news,
    assistance,
    formtube,
    engineering,
    honor,
    dynamic,
    // protection,
    banner,
    bannerSmall,
    labels,
    financial
    // policies,
    // association,
    // analysis,
    // warning
  },
  data() {
    return {
      checkType: "8",
      currentView: "banner",
      menu: [
        {
          id: "8",
          menu: "banner管理",
          path: "banner",
        },
        {
          id: "10",
          menu: "小程序banner管理",
          path: "bannerSmall",
        },
        {
          id: "2",
          menu: "政策资讯活动管理",
          path: "news",
        },
        {
          id: "3",
          menu: "海外援助管理",
          path: "assistance",
        },
        {
          id: "7",
          menu: "对话顺德管理",
          path: "honor",
        },
        {
          id: "4",
          menu: "双家工程管理",
          path: "engineering",
        },
        {
          id: "5",
          menu: "知识产权金融管理",
          path: "financial",
        },
        {
          id: "6",
          menu: "知识产权动态管理",
          path: "dynamic",
        },
        {
          id: "1",
          menu: "咨询管理",
          path: "formtube",
        },
        {
          id: "9",
          menu: "标签管理",
          path: "labels",
        },

        // {
        //   id: "9",
        //   menu: "海外最新政策",
        //   path: "policies",
        // },
        // {
        //   id: "10",
        //   menu: "海外智联体",
        //   path: "association",
        // },
        // {
        //   id: "11",
        //   menu: "海外专利情报分析",
        //   path: "analysis",
        // },
        //   {
        //   id: "12",
        //   menu: "海外诉讼预警",
        //   path: "warning",
        // },
      ],
    };
  },
  methods: {
    handselect(key, keyPath) {
      this.checkType = key;
      this.currentView = key;
    },
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style lang="less" scoped>
.left_menus {
  width: 20%;
  border: 1px solid #e6e9f0;
}
.centet_chart {
  width: 77%;
}
.menu_active {
  border-right: 3px solid #3377ff;
  background-color: #ecf5ff;
}
</style>